﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>JSON对比、JSON比较 - huatools.com</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="json对比,json比较,json比对,json差异对比">
    <meta name="description" content="在线JSON对比、JSON比较、JSON比对、JSON差异对比工具。">
    <meta name="renderer" content="webkit">
    <link rel="icon" href="../img/favicon.ico"/>
    <link rel="stylesheet" href="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/layui/2.5.5/css/layui.min.css"/>
    <link rel="stylesheet" href="//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/codemirror/5.50.0/codemirror.min.css">
    <link rel="stylesheet" href="../codemirror/addon/lint/lint.min.css">
    <link rel="stylesheet" href="../codemirror/addon/merge/merge.min.css">
    <link rel="stylesheet" href="../css/public.min.css"/>
    <link rel="stylesheet" href="../css/tools.min.css"/>
    <link rel="stylesheet" href="index.min.css"/>
    <script src="//lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/layui/2.5.5/layui.js"></script>
    <script src="//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.6.0/jquery.min.js"></script>
    <script src="//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/diff_match_patch/20121119/diff_match_patch.js"></script>
    <script src="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/codemirror/5.50.0/codemirror.min.js"></script>
    <script src="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/codemirror/5.50.0/addon/display/placeholder.min.js"></script>
    <script src="../codemirror/addon/merge/merge2.min.js"></script>
    <script src="../codemirror/addon/lint/jsonlint.min.js"></script>
    <script src="../codemirror/addon/search/search-all.min.js"></script>
    <script src="//lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/clipboard.js/2.0.10/clipboard.min.js"></script>
    <script src="//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="../js/json-bigint.min.js"></script>
    <script src="../js/public.min.js"></script>
    <script src="index.min.js"></script>
</head>
<body>
<div class="body-div">
    <div class="menu-div">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="/public/">JSON格式化</a></li>
            <li class="layui-nav-item"><a href="/public/xml-format/">XML格式化</a></li>
            <li class="layui-nav-item">
                <a href="javascript:">URL工具</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">对比工具</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">转换工具</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">分隔工具</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">文本工具</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">数字工具</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">格式化</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">加解密</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:">更多</a>
                <dl class="layui-nav-child"></dl>
            </li>
            <li class="layui-nav-item skin-nav-item">
                <a href="javascript:"><i class="layui-icon layui-icon-theme"></i>换肤</a>
                <dl class="layui-nav-child"></dl>
            </li>
        </ul>
    </div>
    <div class="main-div">
        <div class="layui-container">
            <div class="layui-row btns-row">
                <div class="layui-col-left">
                    <div class="layui-col-md6">
                        <button type="button" class="layui-btn layui-btn-sm right-btn" id="clear" title="清空">
                            <i class="gg-trash-empty"></i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm right-btn" id="copy" title="复制">
                            <i class="gg-copy"></i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm right-btn" id="format" title="格式化">
                            <i class="gg-code"></i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm right-btn" id="save" title="保存">
                            <i class="gg-download"></i>
                        </button>
                        <span id="diff-result"></span>
                    </div>
                    <div class="layui-col-md6">
                        <button type="button" class="layui-btn layui-btn-sm right-btn" id="clear2" title="清空">
                            <i class="gg-trash-empty"></i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm right-btn" id="copy2" title="复制">
                            <i class="gg-copy"></i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm right-btn" id="format2" title="格式化">
                            <i class="gg-code"></i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm right-btn" id="save2" title="保存">
                            <i class="gg-download"></i>
                        </button>
                        <div class="other-btns">
                            <button type="button" class="layui-btn layui-btn-sm right-btn" id="set" title="设置">
                                <i class="layui-icon layui-icon-set"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row editor-row">
                <div class="layui-col-left json-editor" id="view"></div>
            </div>
        </div>
    </div>
    <div class="set-div" style="display:none">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">功能</li>
                <li>帮助</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="settings-form-item">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">行内换行</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" lay-skin="primary" lay-filter="line-wrap" id="line-wrap" title="开启" checked>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">自动排序</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" lay-skin="primary" lay-filter="auto-sort" id="auto-sort" title="开启">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">内层转义</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" lay-skin="primary" lay-filter="inner-escape" id="inner-escape" title="去除">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="help">1、如输入JSON，则自动格式化</div>
                    <div class="help">2、如输入DICT，则自动转为JSON并格式化</div>
                    <div class="help">3、如输入已转义JSON/DICT，则自动去除转义并格式化</div>
                    <div class="help">4、光标激活编辑器时，Alt-G 跳至指定行</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
